<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar" style="display: inline-block; width: 100%">
        <label style="margin-right: 10px">员工姓名：</label>
        <el-input v-model="name" placeholder="请填写员工姓名" style="width: 15%" clearable @clear="init"
          @keyup.enter.native="init" />
        <div style="float: right">
          <el-button type="primary" class="continue" @click="addEmployeetype('add')">
            + 新增员工
          </el-button>
        </div>
        <el-button class="normal-btn continue" @click="init(true)">
          查询
        </el-button>
      </div>
      <el-table v-if="tableData.length" :data="tableData" stripe class="tableBox">
        <el-table-column prop="name" label="员工姓名" />
        <el-table-column prop="username" label="账号">
        </el-table-column>
        <el-table-column prop="phone" label="手机号">
        </el-table-column>
        <el-table-column label="账号状态">
          <template slot-scope="scope">
            <div class="tableColumn-status" :class="{ 'stop-use': String(scope.row.status) === '0' }">
              {{ String(scope.row.status) === '0' ? '禁用' : '启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="操作时间" />
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="blueBug" @click="addEmployeetype(scope.row.id)">
              修改
            </el-button>
            <el-button type="text" size="small" class="non" :class="{
                         blueBug: scope.row.status == '0',
                         delBut: scope.row.status != '0'
                       }" :disabled="scope.row.username=='admin'" @click="statusHandle(scope.row)">
              {{ scope.row.status == '1' ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination v-if="counts > 10" class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="counts" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

  </div>
</template>
<script lang="ts">
  import {
    enableOrDisableEmployee
  } from '@/api/employee'
  import {
    getEmployeePage
  } from '@/api/employee'
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  @Component({
    name: 'Employee'

  })
  export default class extends Vue {
    //搜索名称
    private name: string = ''
    //页码
    private page: number = 1
    //每页条数
    private pageSize: number = 10


    private counts: number
    //表格内的数据
    private tableData = []
    private isSearch: boolean = false
    //员工id  修改 禁用|启用
    private id = ''
    //员工状态  修改 禁用|启用
    private status = ''

    created() {
      this.init()
    }
    // 初始化信息
    private async init(isSearch ? ) {
      this.isSearch = isSearch
      await getEmployeePage({
          page: this.page,
          pageSize: this.pageSize,
          name: this.name ? this.name : undefined,

        })
        .then(res => {
          if (String(res.data.code) === '1') {
            this.tableData =
              res && res.data && res.data.data && res.data.data.records
            this.counts = res.data.data.total

          } else {
            this.$message.error(res.data.desc)
          }
        })
        .catch(err => {
          console.log(err, 'err')
          this.$message.error('请求出错了：' + err.message)
        })

    }
    //状态修改
    private statusHandle(row: any) {
      this.id = row.id
      this.status = row.status
      if (row.username == 'admin') {
        this.$message("不能修改管理员的状态")
        return
      }



      this.$confirm('确认调整该员工的状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'customClass'
      }).then(() => {
        enableOrDisableEmployee({
            id: this.id,
            status: !this.status ? 1 : 0
          })
          .then(res => {
            if (String(res.status) === '200') {
              this.$message.success('分类状态更改成功！')
              this.init()
            }
          })
          .catch(err => {
            this.$message.error('请求出错了：' + err.message)
          })
      })
    }

    //添加或修改员工
    private addEmployeetype(st: string) {
      if (st === 'add') {
        this.$router.push({
          path: '/employee/add'
        })
      } else {
        this.$router.push({
          path: '/employee/add',
          query: {
            id: st
          }
        })
      }
    }


    //分页 每页记录数改变
    private handleSizeChange(val: any) {
      this.pageSize = val
      this.init()
    }
    //分页 页码改变
    private handleCurrentChange(val: any) {
      this.page = val
      this.init()
    }
  }

</script>

<style lang="scss" scoped>
  .disabled-text {
    color: #bac0cd !important;
  }

</style>
